<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姚德秋">
    <title></title>
    <style>
        section {
            width: 700px;
            margin: 100px auto;
        }

        .table div {
            float: left;
            width: 120px;
            height: 120px;
            border: 2px solid black;
            margin: 5px;
        }

       
        h4 {
            text-align: center;
            /* display: block; */
        }
        h2{
            text-align: center;
        }

        img {
            float: left;
             /* margin-top: -130px;  */
             display: none; 
            /* margin-left:; */
            /* margin-right: 2px; */
        }
        div:hover {
            border: 2px solid transparent;
        }
        div:hover img{
            display: block;
            /* z-index: 9999; */
            }
             div:hover h2{
                display: none;
            } 
            div:hover h4{
                display: none;
            } 
            .clear{
                clear: both;
            }
    </style>
</head>

<body>
    <section class="table">
        <div>
            <h2>BMW</h2>
            <h4>宝马汽车</h4>
            <img src="../img/1.jpg" alt="">
        </div>
        <div>
            <h2>BMW</h2>
            <h4>宝马汽车</h4>
            <img src="../img/2.jpg" alt=""></div>
        <div>
            <h2>BMW</h2>
            <h4>宝马汽车</h4>
            <img src="../img/3.jpg" alt=""></div>
        <div>
            <h2>BMW</h2>
            <h4>宝马汽车</h4>
            <img src="../img/4.jpg" alt=""></div>
        <div>
            <h2>BMW</h2>
            <h4>宝马汽车</h4>
            <img src="../img/5.jpg" alt=""></div>
        <div>
            <h2>BMW</h2>
            <h4>宝马汽车</h4>
            <img src="../img/6.jpg" alt=""></div>
        <div>
            <h2>BMW</h2>
            <h4>宝马汽车</h4>
            <img src="../img/7.jpg" alt=""></div>
        <div>
            <h2>BMW</h2>
            <h4>宝马汽车</h4>
            <img src="../img/8.jpg" alt=""></div>
        <div>
            <h2>BMW</h2>
            <h4>宝马汽车</h4>
            <img src="../img/9.jpg" alt=""></div>
        <div>
            <h2>BMW</h2>
            <h4>宝马汽车</h4>
            <img src="../img/10.jpg" alt="">
        </div>
        </section>
        <div class="clear"></div>
</body>

</html>
<script>
    // var divs = 




</script>